<template>
  <el-container>
    <basic-crud :option="option" apiGetListUrl="/mes/mesStatisticsController/listHrTotal">
      <template #planQuantity="{ row }">
        <el-button
            class="ml10"
            type="text"
            @click="onOpenDialogByItem('plan',row)"
        >{{row.planQuantity}}
        </el-button>
      </template>
      <template #finishQuantity="{ row }">
        <el-button
            class="ml10"
            type="text"
            @click="onOpenDialogByItem('finish',row)"
        >{{row.finishQuantity}}
        </el-button>
      </template>
    </basic-crud>
    <resources-item ref="resourcesItemRef"></resources-item>
  </el-container>
</template>

<script setup>
import ResourcesItem from "./resourcesItem.vue";
const option = ref({
  highlightCurrentRow: true,
  addBtn: false,
  menu: false,
  size: 'small',
  column: [
    {
      label: '计划结束日期',
      prop: 'needEndDate',
      searchType: 'datetimerange',
      format: 'yyyy-MM-dd',
      searchLabelWidth: 140,
      search: true,
      hide: true,
      searchSpan: 8,
      valueFormat: 'yyyy-MM-dd',
      startPlaceholder: '时间日期开始范围自定义',
      endPlaceholder: '时间日期结束范围自定义',
    },
    {
      label: "工号",
      propType: "String",
      prop: "userCode",
      searchSpan: 4,
      search: true,
    },
    {
      label: "姓名",
      propType: "String",
      prop: "userName",
      searchSpan: 4,
      search: true,
    },
    {
      label: "部门",
      propType: "String",
      prop: "userDeptName",
      searchSpan: 4,
      search: true,
    },
    {
      label: '完工日期',
      prop: 'finishDateTime',
      searchType: 'datetimerange',
      format: 'yyyy-MM-dd',
      searchLabelWidth: 140,
      search: true,
      hide: true,
      searchSpan: 8,
      valueFormat: 'yyyy-MM-dd',
      startPlaceholder: '时间日期开始范围自定义',
      endPlaceholder: '时间日期结束范围自定义',
    },
    {
      label: "计划数量",
      prop: "planQuantity",
    },
    {
      label: "完成数量",
      prop: "finishQuantity",
    },
    {
      label: "完成率",
      prop: "finishRate",
      width: 120,
      formatter: (val) => {
        return val.finishRate + '%';
      },
    }
  ]
});

const resourcesItemRef = ref(null);
const onOpenDialogByItem = (type,row) => {
  resourcesItemRef.value?.openDialog(type,row);
};
</script>

<style lang="scss" scoped>

</style>
